<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend_Study - Index</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body style="border: 1px solid brown; margin: 0; padding: 10px;">

    <!-- 顶栏 -->
    <div class="navbar-top">
        <ul>
            <li>
                nav-1
            </li>
            <li>
                nav-2
            </li>
            <li>
                nav-3
            </li>
            <li>
                nav-4
            </li>
        </ul> 
    </div>

    <!-- 页面主体 -->
    <div style="display: flex; overflow: auto; max-height: calc(100% - 50px); border: 1px solid black;margin-top: 50px;">
        <!-- 侧边栏 -->
        <div class="navbar-side">
            <ul>
                <li>
                    菜单1-1
                </li>
                <li>
                    菜单1-2
                </li>
                <li>
                    菜单1-3
                </li>
            </ul>
            <ul>
                <li>
                    菜单2-1
                </li>
                <li>
                    菜单2-2
                </li>
                <li>
                    菜单2-3
                </li>
            </ul>
        </div>

        <!-- main content -->
        <div class="content">
            <div class="header">
                <button type="button" onclick="openSidebar()">开启</button>
                <button type="button" onclick="closeSidebar()">关闭</button>

            </div>
            <div>
                <p>
                    在很多情况下，都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式，下面将介绍方法的使用、效果、以及缺陷。</p>
<p>1、使用obj.className来修改样式表的类名。</p>

<p>2、使用obj.style.cssTest来修改嵌入式的css。</p>

<p>3、使用obj.className来修改样式表的类名。</p>

<p>
4、使用更改外联的css文件，从而改变元素的css</p>
<p>
下面是一段html代码和css代码用来解释上面方法的区别的。
                </p>
            </div>
            <div class="footer">

            </div>
        </div>
    </div>

    <script type="text/javascript" src="/js/main.js">

    </script>
</body>
</html>